<template>
    <div class="app-container">
        <div class="container-top">
            <div class="title">
                <i class="iconfont header-abs-back" @click="goBack">&#xe6b9;</i>
                <span class="nav-bar_text">自然人实名注册</span>
            </div>
        </div>
        <div class="container-center">
            <div class="content-list">
                <van-form>
                    <van-field
                        v-model="userInfo.username"
                        name="姓名"
                        label="姓名"
                        placeholder="请输入姓名"
                    />
                    <van-field
                        v-model="userInfo.cardId"
                        name="证件号码"
                        label="证件号码"
                        placeholder="请输入证件号码"
                    />
                    <van-field
                        v-model="userInfo.phone"
                        name="手机号码"
                        label="手机号码"
                        placeholder="请输入手机号码"
                    />
                    <van-field
                        v-model="userInfo.password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="不少于6位数字+字母组合"
                    />
                    <van-field
                        v-model="userInfo.confirmPassword"
                        type="password"
                        name="确认密码"
                        label="确认密码"
                        placeholder="两次密码必须一致"
                    />
                </van-form>
            </div>
            <div class="agreement">
                <van-checkbox v-model="isAgree" icon-size="14px" class="vantcheck"></van-checkbox>
                <span class="careful">注册即表示同意<span class="_bule" @click="goAgreement">《用户服务协议》</span>和<span class="_bule" @click="goPrivacy">《用户隐私政策》</span></span>
            </div>
        </div>
        <div class="container-bottom">
            <div class="bottom-bg"></div>
            <div class="bottom-register">
                <van-button type="info" class="btn" @click="register">立即注册</van-button>
            </div>
        </div>
    </div>
</template>
<script>
import { Register } from "@/api/index";
import { Toast } from 'vant';

export default {
    name: 'Register',
    data () {
       return{
            isAgree: false,
            userInfo: {
               username: '',
               cardId: '',
               phone: '',
               password: '',
               confirmPassword: '',
            }
        } 
    },
    methods: {
        register() {
            if(this.vaildata()){
                const { username, cardId, phone, password } = this.userInfo;
                const params = {
                username: username,
                idcard: cardId,
                mobile: phone,
                password: password
                }
                const toast1 = Toast.loading({
                    loadingType: 'spinner',
                     duration: 0,
                });
                Register(params).then(res => {
                    toast1.clear();
                    res = res.data;
                    if (res.code == 1) {
                        Toast({
                            message: res.msg,
                            position: 'bottom',
                            duration: 500,
                        });
                        setTimeout(() => {
                            this.$router.push({ path: '/login' })
                        }, 500);
                    } else {
                        Toast({
                            message: res.msg,
                            position: 'bottom',
                            duration: 3000,
                        });
                    }
                });
            }
        },
        goBack() {
            this.$router.go(-1);
        },
        vaildata() {
            let flag = true;
            let format = false;
            if(!this.userInfo.username){
                Toast({
                    message: '姓名不能为空',
                    position: 'bottom',
                });
                flag = false;
            }else if(!this.userInfo.cardId){
                Toast({
                    message: '证件号码不能为空',
                    position: 'bottom',
                });
                flag = false;
            }else if(!this.userInfo.phone){
                Toast({
                    message: '手机号码不能为空',
                    position: 'bottom',
                });
                flag = false;
            }else if(!this.userInfo.password){
                Toast({
                    message: '密码不能为空',
                    position: 'bottom',
                });
                flag = false;
            }else if(!this.userInfo.confirmPassword){
                Toast({
                    message: '确认密码不能为空',
                    position: 'bottom',
                });
                flag = false;
            }else if(!this.isAgree){
                Toast({
                    message: '请仔细阅读并同意勾选《用户服务协议》和《隐私协议》',
                    position: 'bottom',
                });
                flag = false;
            }

            if(this.userInfo.cardId){
                const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
                if(!reg.test(this.userInfo.cardId)){
                    Toast({
                        message: '证件号码格式不正确',
                        position: 'bottom',
                    });
                    format = false;
                }else{
                    format = this.jude('cardId');
                }
            }
            if(this.userInfo.phone){
                const reg = /^1(3|4|5|6|7|8|9)\d{9}$/; 
                if(!reg.test(this.userInfo.phone)){
                    Toast({
                        message: '手机号码格式不正确',
                        position: 'bottom',
                    });
                    format = false;
                }else{
                    format = this.jude('phone');
                }
            }

            if(this.userInfo.password){
                const reg = /^[0-9A-Za-z]{6,}$/;
                if(!reg.test(this.userInfo.password)){
                     Toast({
                        message: '密码长度不能少于6位',
                        position: 'bottom',
                    });
                    format = false;
                }else{
                    format = this.jude('password');
                }
            }

            if(this.userInfo.confirmPassword){
                if(this.userInfo.password.trim() != this.userInfo.confirmPassword.trim()){
                    Toast({
                        message: '两次输入的密码不一致',
                        position: 'bottom',
                    });
                    format = false;
                }else{
                    format = this.jude('confirmPassword');
                }
            }
            
            return flag && format;
        },
        jude(param){
            let keyName = param;
            let num = Object.keys(this.userInfo).length;
            let count = 0;
            for (let key in this.userInfo){
                if(keyName != key){
                    if(this.userInfo[key]){
                        count++;
                    }
                }
            };
            return count == num - 1? true : false;
        },
        goAgreement() {
            this.$router.push({path: '/agreement'});
        },
        goPrivacy() {
            this.$router.push({path: '/privacy'});
        } 

    }
}
</script>
<style lang="less" scoped>
@import '~styles/varibles.less';

.app-container{
    position: relative;
    .container-top{
        width: 100%;
        padding-bottom: 36.2%;
        background-image: url('../../assets/images/registerbg.png');
        background-size: 100% 100%;
        position: relative;
        .title{
          width: 92%;
        //   height: @headerHeight;
          margin: auto;
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          font-size: 18px;
          color: #fff;
          position: absolute;
          top: 30%;
          left: 50%;
          z-index: 5;
          transform: translate(-50%, -50%);
          .header-abs-back {
            font-size: @navIconFontSize;
            margin-right: 10px;
          }
        }
    }
    .container-center{
        width: 92%;
        position: absolute;
        top: 34.2%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        border-radius: 10px;
        .content-list{
            
        }
        .agreement{
            width: 100%;
            display: flex;
            flex-flow: row;
            justify-content: center;
            align-items: center;
            // padding: 15px 0;
            font-size: 14px;
            background: #F8F8F5;
            color: #797979;
            .vantcheck{
                padding-top: 15px;
                padding-right: 5px;
            }
            .careful{
                padding-top: 15px;
                padding-bottom: 2px;
                line-height: 1.2;
            }
        }
    }
    .container-bottom{
        width: 100%;
        padding-bottom: 150%;
        position: relative;
        // background-color: rgba(248, 244, 245, 0);
        // background: -webkit-linear-gradient(left)
        // background-image: linear-gradient(to right, #e66465, #9198e5);
        .bottom-bg{
            width: 100%;
            padding-bottom: 75%;
            background-image: linear-gradient(to right, #F6F7FB, #F8F8F5);
            position: absolute;
            top: 0;
            left: 0
        }
        .bottom-register{
            width: 92%;
            height: 150px;
            position: absolute;
            bottom: 10%;
            left: 50%;
            transform: translate(-50%, -50%);
            .btn{
                width: 100%;
            }
        }
    }
}
/deep/ .van-cell{
    line-height: 32px;
    // border-bottom: 1px solid #EEEEEE;
    font-size: 18px;
    color: #454543;
    span{
        font-weight:400;
    }
}
/deep/ .van-form{
    .van-cell:nth-child(1){
        border-top-left-radius: 8px!important;
        border-top-right-radius: 8px!important;
    }
    .van-cell:last-child{
        border-bottom-left-radius: 8px!important;
        border-bottom-right-radius: 8px!important;
        // border-bottom: 0;
    }
}
._bule{
    color: #2EA6BF!important;
}
/deep/.van-button{
    height: 56px;
    font-size: 18px!important;
    border-radius: 8px;
}
</style>